<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>结算页面</title>
		<link rel="shortcut icon" href="img/foodie.ico" />

		<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="css/jsstyle.css" rel="stylesheet" type="text/css" />
		<link href="css/lee.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="js/address.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
	</head>

	<body>
		<div id="pay">
			<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div class="menu-hd" v-show="!userIsLogin">
							<a href="login.html" target="_top" class="h">亲，请登录</a>
							<a href="register.html" target="_top">免费注册</a>
						</div>
						<div class="menu-hd" v-show="userIsLogin">
							<span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
					</div>
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
								<i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
					</div>
				</ul>
			</div>

			<!--悬浮搜索框-->
			<div class="nav white">
				<!-- <div class="logo"><img src="images/logo.png" /></div> -->
				<div class="logoBig">
					<li><img src="images/logobig.png" /></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>
			<div class="concent">
				<!--地址 -->
				<div class="paycont">
					<div class="address">
						<h3>确认收货地址 </h3>
						<div class="control">
							<div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
						</div>
						<div class="clear"></div>
						<ul>
							<span v-show="addressList.length > 0">
								<!-- <block v-for="(address, aindex) in addressList" :key="aindex">
								<div class="per-border"></div> -->
								<!-- <li class="user-addresslist " v-for="(address, aindex) in addressList" :key="aindex" style="margin-top: 6px;"> -->
								<li :class="['user-addresslist', {'defaultAddr' : address.id == choosedAddressId}]" v-for="(address, aindex) in addressList"
								 :key="aindex" @click="chooseAddress(address.id)" style="margin-top: 6px;">
									<!-- <li :class="['user-addresslist', {'DefaultAddr' : address.isDefault == 1}]"> -->
									<div class="address-left">
										<!-- background: url(../images/peraddbg.png)no-repeat scroll 0% 0%; -->
										<!-- :style="address.isDefault == 1 ? " -->
										<div class="user DefaultAddr">
											<span class="buy-address-detail">
												<span class="buy-user">{{address.receiver}}</span>
												<span class="buy-phone">{{address.mobile}}</span>
											</span>
										</div>
										<div class="default-address DefaultAddr">
											<span class="buy-line-title buy-line-title-type">收货地址：</span>
											<span class="buy--address-detail">
												<span class="province">{{address.province}}</span>
												<span class="city">{{address.city}}</span>
												<span class="dist">{{address.district}}</span>
												<span class="street">{{address.detail}}</span>
											</span>
										</div>
										<ins class="deftip" v-show="address.isDefault == 1">默认地址</ins>
									</div>
									<div class="address-right">
										<a href="person/address.html">
											<span class="am-icon-angle-right am-icon-lg"></span></a>
									</div>
									<div class="clear"></div>

									<div class="new-addr-btn">
										<a href="javascript:void(0);" @click.stop="setDefaultAddress(address.id)" :class="[{'hidden' : address.id == defaultAddressId}]">设为默认</a>
										<span :class="['new-addr-bar', {'hidden' : address.id == defaultAddressId}]">|</span>
										<a href="javascript:void(0);" @click.stop="editAddress(address.id)">编辑</a>
										<span class="new-addr-bar">|</span>
										<a href="javascript:void(0);" @click.stop="deleteAddress(address.id)">删除</a>
									</div>
								</li>
								<!-- </block> -->
							</span>

						</ul>

						<div class="clear"></div>
					</div>

					<!--支付方式-->
					<div class="logistics">
						<h3>选择支付方式</h3>
						<ul class="pay-list">
							<li class="" @click="choosePayMethod(1)" style="width: 180px;height:40px;padding:3px;"><img src="img/wxpay.png" /><span></span></li>
							<!-- <li class="pay qq" @click="choosePayMethod(1)"><img src="images/weizhifu.jpg"/>微信<span></span></li> -->
							<!-- <li class="pay taobao" @click="choosePayMethod(2)"><img src="images/zhifubao.jpg"/>支付宝<span></span></li> -->
							<li class="" @click="choosePayMethod(2)" style="width: 180px;height:40px;padding:3px;"><img src="img/alipay.png" /><span></span></li>
						</ul>
					</div>
					<div class="clear"></div>

					<!--订单 -->
					<div class="concent">
						<div id="payTable">
							<h3>确认订单信息</h3>
							<div class="cart-table-th">
								<div class="wp">

									<div class="th th-item">
										<div class="td-inner">商品信息</div>
									</div>
									<div class="th th-price">
										<div class="td-inner">单价</div>
									</div>
									<div class="th th-amount">
										<div class="td-inner">数量</div>
									</div>
									<div class="th th-sum">
										<div class="td-inner">金额</div>
									</div>
									<div class="th th-oplist">
										<div class="td-inner">配送方式</div>
									</div>

								</div>
							</div>
							<div class="clear"></div>

							<tr class="item-list">
								<div class="bundle  bundle-last" v-for="(orderItem, index) in orderItemList">

									<div class="bundle-main">
										<ul class="item-content clearfix">
											<div class="pay-phone">
												<li class="td td-item">
													<div class="item-pic">
														<a :href="'item.html?itemId=' + orderItem.itemId" target="_blank" class="J_MakePoint">
															<img :src="orderItem.itemImgUrl" class="itempic J_ItemImg" style="width: 80px;height: 80px"></a>
													</div>
													<div class="item-info">
														<div class="item-basic-info">
															<a :href="'item.html?itemId=' + orderItem.itemId" target="_blank" class="item-title J_MakePoint"
															 data-point="tbcart.8.11">{{orderItem.itemName}}</a>
														</div>
													</div>
												</li>
												<li class="td td-info">
													<div class="item-props">
														<span class="sku-line">规格：{{orderItem.specName}}</span>
													</div>
												</li>
												<li class="td td-price">
													<div class="item-price price-promo-promo">
														<div class="price-content">
															<em class="J_Price price-now">{{orderItem.priceDiscount / 100}}</em>
														</div>
													</div>
												</li>
											</div>
											<li class="td td-amount">
												<div class="amount-wrapper ">
													<div class="item-amount ">
														<span class="phone-title">购买数量</span>
														<div class="sl">
															{{orderItem.buyCounts}}
														</div>
													</div>
												</div>
											</li>
											<li class="td td-sum">
												<div class="td-inner">
													<em tabindex="0" class="J_ItemSum number">{{orderItem.priceDiscount * orderItem.buyCounts / 100}}</em>
												</div>
											</li>
											<li class="td td-oplist">
												<div class="td-inner">
													<span class="phone-title">配送方式</span>
													<div class="pay-logis">
														包邮
													</div>
												</div>
											</li>

										</ul>
										<div class="clear"></div>
									</div>
								</div>
							</tr>
							<div class="clear"></div>
						</div>

					</div>
					<div class="clear"></div>
					<div class="pay-total">
						<!--留言-->
						<div class="order-extra">
							<div class="order-user-info">
								<div id="holyshit257" class="memo">
									<label>买家留言：</label>
									<input v-model="orderRemarker" type="text" title="选填, 可写备注" placeholder="选填, 可写备注" class="memo-input J_MakePoint c2c-text-default memo-close">
									<div class="msg hidden J-msg">
										<p class="error">最多输入500个字符</p>
									</div>
								</div>
							</div>

						</div>
						<div class="clear"></div>
					</div>
					<!--含运费小计 -->
					<div class="buy-point-discharge ">
						<p class="price g_price ">
							合计（包邮）
							<!-- <span>¥</span> -->
							<em class="pay-sum">¥{{totalAmount / 100}}</em>
						</p>
					</div>

					<!--信息 -->
					<div class="order-go clearfix">
						<div class="pay-confirm clearfix">
							<div class="box">
								<div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
									<span class="price g_price ">
										<!-- <span>¥</span>  -->
										<em class="style-large-bold-red " id="J_ActualFee">¥{{totalAmount / 100}}</em>
									</span>
								</div>

								<div id="holyshit268" class="pay-address">

									<p class="buy-footer-address">
										<span class="buy-line-title buy-line-title-type">寄送至：</span>
										<span class="buy--address-detail">
											<span class="province">{{confirmAddress.province}}</span>
											<span class="city">{{confirmAddress.city}}</span>
											<span class="dist">{{confirmAddress.district}}</span>
											<span class="street">{{confirmAddress.detail}}</span>
										</span>
									</p>
									<p class="buy-footer-address">
										<span class="buy-line-title">收货人：</span>
										<span class="buy-address-detail">
											<span class="buy-user">{{confirmAddress.receiver}}</span>
											<span class="buy-phone">{{confirmAddress.mobile}}</span>
										</span>
									</p>
								</div>
							</div>

							<div id="holyshit269" class="submitOrder">
								<div class="go-btn-wrap">
									<a id="J_Go" href="javascript:void(0);" @click="submitOrder" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
								</div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</div>

				<div class="clear"></div>
			</div>
			<!-- </div> -->
			<div class="theme-popover-mask"></div>
			<div class="theme-popover">

				<!--标题 -->
				<div class="am-cf am-padding">
					<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add
							address</small></div>
				</div>
				<hr />

				<div class="am-u-md-12">
					<form class="am-form am-form-horizontal">
						<div class="am-form-group">
							<label for="user-name" class="am-form-label">收货人</label>
							<div class="am-form-content">
								<input type="text" id="user-name" placeholder="收货人" v-model="receiver" maxlength="12">
							</div>
						</div>

						<div class="am-form-group">
							<label for="user-phone" class="am-form-label">手机号码</label>
							<div class="am-form-content">
								<input id="user-phone" placeholder="手机号必填" v-model="mobile" maxlength="11">
							</div>
						</div>

						<div class="am-form-group">
							<label for="user-phone" class="am-form-label">所在地</label>
							<div id="example" class="am-form-content address">
								<select v-model="prov">
									<option v-for="option in arr" :value="option.name">{{ option.name }}</option>
								</select>
								<select v-model="city">
									<option v-for="option in cityArr" :value="option.name">{{ option.name }}</option>
								</select>
								<select v-model="district" v-if="district">
									<option v-for="option in districtArr" :value="option.name">{{ option.name }}</option>
								</select>
							</div>
						</div>

						<div class="am-form-group">
							<label for="user-intro" class="am-form-label">详细地址</label>
							<div class="am-form-content">
								<textarea class="" rows="3" id="user-intro" placeholder="输入详细地址" v-model="detail"></textarea>
								<small>100字以内写出你的详细地址...</small>
							</div>
						</div>

						<div class="am-form-group theme-poptit">
							<div class="am-u-sm-9 am-u-sm-push-3">
								<div class="am-btn am-btn-danger" @click="saveNewAddressOrUpdate">保存</div>
								<div class="am-btn am-btn-danger close" @click="closeAddressDialog">取消</div>
							</div>
						</div>
					</form>
				</div>

				<!-- <input type="hidden" id="hiddenOrderId" :value="orderId"/>
			<a href="" id="alipayLink" target="_blank"></a> -->
			</div>

			<div class="clear"></div>
		</div>
		<script type="text/javascript " src="js/app.js"></script>
		<script type="text/javascript " src="js/cities.js"></script>
		<script type="text/javascript">
			// $(document).ready(function(){
			// 	$("#alipayLink").one("click",function(){
			// 		var orderId = $("#hiddenOrderId").val();
			// 		debugger;

			// 		window.open('alipayTempTransit.html?orderId='+orderId);
			// 	});
			// });
			var index = new Vue({
				el: "#pay",
				data: {
					userIsLogin: false,
					userInfo: {},

					orderItemList: [], // 订单结算的商品列表
					totalAmount: 0, // 订单总价格

					defaultAddressId: "", // 默认地址id
					choosedAddressId: "", // 选中的地址id
					addressList: [],

					updatedAddressId: "", // 用于更新地址的id，如果为空，新增，如果不为空，修改

					confirmAddress: {}, // 确认地址

					choosedPayMethod: 0,
					orderRemarker: "", // 用户备注留言

					receiver: "",
					mobile: "",
					province: "",
					// city: "",
					// district: "",
					detail: "",

					orderId: "",

					arr: arrAll,
					prov: '北京',
					city: '北京',
					district: '东城区',
					cityArr: [],
					districtArr: []
				},

				watch: {
					prov: {
						// 表格数据刷新后需清空之前查看的订单详情内容
						handler: function(newVal, oldVal) {
							this.updateCity();
							this.updateDistrict();
						},
						deep: true,
					},
					city: {
						// 表格数据刷新后需清空之前查看的订单详情内容
						handler: function(newVal, oldVal) {
							this.updateDistrict();
						},
						deep: true,
					},

				},

				created() {
					this.updateCity();
					this.updateDistrict();

					// var me = this;
					// 通过cookie判断用户是否登录
					this.judgeUserLoginStatus();

					// 渲染结算订单信息
					this.renderOrderInfoList();

					// 渲染地址信息
					this.renderUserAddressList();
				},
				methods: {
					goUserCenter() {
						// 判断用户是否登录
						var userIsLogin = this.userIsLogin;
						if (!userIsLogin) {
							// 用户未登录，则跳转
							window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
						} else {
							window.location.href = app.centerServerUrl;
						}
					},
					// goAlipay() {
					//     window.open("alipayTempTransit.html?orderId=" + this.orderId);
					// },
					choosePayMethod(payMethod) {
						this.choosedPayMethod = payMethod;

					},
					// 提交订单，创建订单
					submitOrder() {
						// 判断提交的商品不能为空
						var orderItemList = this.orderItemList;
						if (orderItemList == null || orderItemList == undefined || orderItemList == '' || orderItemList.length <= 0) {
							alert("没有商品信息，订单无法提交~！");
							return;
						}
						// 拼接规格ids
						var itemSpecIds = "";
						for (var i = 0; i < orderItemList.length; i++) {
							var tmpSpecId = orderItemList[i].specId;
							itemSpecIds += tmpSpecId;
							if (i < orderItemList.length - 1) {
								itemSpecIds += ",";
							}
						}

						// 判断选中的地址id不能为空
						var choosedAddressId = this.choosedAddressId;
						if (choosedAddressId == null || choosedAddressId == undefined || choosedAddressId == '') {
							alert("请选择收货地址！");
							return;
						}

						// 判断支付方式不能为空
						var choosedPayMethod = parseInt(this.choosedPayMethod);
						if (choosedPayMethod != 1 && choosedPayMethod != 2) {
							alert("请选择支付方式！");
							return;
						}

						// var newWindow = window.open();

						// 买家备注可以为空
						var orderRemarker = this.orderRemarker;
						// console.log(orderRemarker);

						var userInfo = this.userInfo;
						var serverUrl = app.serverUrl;
						axios.defaults.withCredentials = true;
						axios.post(
								serverUrl + '/orders/create', {
									"userId": userInfo.id,
									"itemSpecIds": itemSpecIds,
									"addressId": choosedAddressId,
									"payMethod": choosedPayMethod,
									"leftMsg": orderRemarker,
								}, {
									headers: {
										'headerUserId': userInfo.id,
										'headerUserToken': userInfo.userUniqueToken
									}
								})
							.then(res => {
								if (res.data.status == 200) {
									// alert("OK");
									var orderId = res.data.data;
									// 判断是否微信还是支付宝支付
									if (choosedPayMethod == 1) {
										// 微信支付则跳转到微信支付页面，并且获得支付二维码
										window.location.href = "wxpay.html?orderId=" + orderId;
									} else if (choosedPayMethod == 2) {
										this.orderId = orderId;

										// 支付宝支付直接跳转
										window.location.href = "alipay.html?orderId=" + orderId + "&amount=" + this.totalAmount;
										window.open("alipayTempTransit.html?orderId=" + orderId);
										// const newWindow = window.open();
										// 弹出的新窗口进行支付
										// newWindow.location = "alipayTempTransit.html?orderId=" + orderId;
										// this.$nextTick(()=> {
										// 	// 当前页面跳转后会轮训支付结果
										// 	newWindow.location.href = "alipay.html?orderId=" + orderId;
										// })
									} else {
										alert("目前只支持微信或支付宝支付！");
									}

								} else {
									alert(res.data.msg);
								}
							});
					},
					// 编辑地址
					editAddress(addressId) {
						// 获得编辑的地址内容
						var addressList = this.addressList;
						var updateAddress = null;
						for (var i = 0; i < addressList.length; i++) {
							var tmpAddress = addressList[i];
							if (tmpAddress.id == addressId) {
								updateAddress = tmpAddress;
								break;
							}
						}

						// 赋值
						this.receiver = updateAddress.receiver;
						this.mobile = updateAddress.mobile;
						this.prov = updateAddress.province;
						this.city = updateAddress.city;
						this.district = updateAddress.district;
						this.detail = updateAddress.detail;

						// 弹出对话框
						this.showAddressDialog();

						// 设置更新地址的id
						this.updatedAddressId = addressId;
					},
					// 弹出对话框
					showAddressDialog() {
						// 禁止遮罩层下面的内容滚动
						$(document.body).css("overflow", "hidden");
						$(this).addClass("selected");
						$(this).parent().addClass("selected");

						$('.theme-popover-mask').show();
						$('.theme-popover-mask').height($(window).height());
						$('.theme-popover').slideDown(200);
					},
					// 删除地址
					deleteAddress(addressId) {
						var isDel = window.confirm("确认删除改地址吗");
						if (!isDel) {
							return;
						}

						// 如果删除的地址是默认地址或者选中地址，则choosedAddressId和defaultAddressId要设置为空
						if (addressId == this.choosedAddressId) {
							this.choosedAddressId = "";
						}

						if (addressId == this.defaultAddressId) {
							this.defaultAddressId = "";
						}

						var userInfo = this.userInfo;
						var serverUrl = app.serverUrl;
						axios.defaults.withCredentials = true;
						axios.post(
								serverUrl + '/address/delete?userId=' + userInfo.id + "&addressId=" + addressId, {}, {
									headers: {
										'headerUserId': userInfo.id,
										'headerUserToken': userInfo.userUniqueToken
									}
								})
							.then(res => {
								if (res.data.status == 200) {
									this.renderUserAddressList();
								} else {
									alert(res.data.msg);
								}
							});
					},
					// 设置默认地址
					setDefaultAddress(addressId) {
						var userInfo = this.userInfo;
						var serverUrl = app.serverUrl;
						axios.defaults.withCredentials = true;
						axios.post(
								serverUrl + '/address/setDefalut?userId=' + userInfo.id + "&addressId=" + addressId, {}, {
									headers: {
										'headerUserId': userInfo.id,
										'headerUserToken': userInfo.userUniqueToken
									}
								})
							.then(res => {
								if (res.data.status == 200) {
									this.renderUserAddressList();
								} else {
									alert(res.data.msg);
								}
							});
					},
					// 选择地址，切换选中效果
					chooseAddress(choosedAddressId) {
						this.choosedAddressId = choosedAddressId;
						// this.defaultAddressId = choosedAddressId;
						// console.log("this.defaultAddressId:" + this.defaultAddressId);
						// console.log("this.choosedAddressId:" + this.choosedAddressId);

						// 确认地址动态改变
						this.renderConfirmAddress(choosedAddressId);
					},
					renderConfirmAddress(addressId) {
						// 提交订单的确认地址要跟着动态改变
						var addressList = this.addressList;
						var confirmAddress = null;
						for (var i = 0; i < addressList.length; i++) {
							var tmpAddress = addressList[i];
							if (tmpAddress.id == addressId) {
								confirmAddress = tmpAddress;
								break;
							}
						}
						// 赋值
						this.confirmAddress = confirmAddress;
					},
					updateCity() {
						for (var i in this.arr) {
							var obj = this.arr[i];
							if (obj.name == this.prov) {
								this.cityArr = obj.sub;
								break;
							}
						}
						this.city = this.cityArr[1].name;
					},
					updateDistrict() {
						for (var i in this.cityArr) {
							var obj = this.cityArr[i];
							if (obj.name == this.city) {
								this.districtArr = obj.sub;
								break;
							}
						}
						if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
							this.district = this.districtArr[1].name;
						} else {
							this.district = '';
						}
					},
					// 创建用户新地址
					saveNewAddressOrUpdate() {
						var receiver = this.receiver;
						if (receiver == null || receiver == '' || receiver == undefined) {
							alert("收货人姓名不能为空");
							return;
						}
						if (receiver.length > 12) {
							alert("收货人姓名不能太长");
							return;
						}

						var mobile = this.mobile;
						if (mobile == null || mobile == '' || mobile == undefined) {
							alert("手机不能为空");
							return;
						}
						if (mobile.length != 11) {
							alert("手机号长度为11位");
							return;
						}
						var checkMobile = app.checkMobile(mobile);
						if (!checkMobile) {
							alert('请输入有效的手机号码！');
							return;
						}

						var prov = this.prov;
						var city = this.city;
						var district = this.district;

						var detail = this.detail;
						if (detail == null || detail == '' || detail == undefined) {
							alert("详细地址不能为空");
							return;
						}

						// 添加新地址
						var userInfo = this.userInfo;
						var serverUrl = app.serverUrl;
						axios.defaults.withCredentials = true;

						var addressId = this.updatedAddressId;

						// 地址id为空，则新增地址，否则更新地址
						if (addressId == "" || addressId == undefined || addressId == null) {
							axios.post(
									serverUrl + '/address/add', {
										"userId": userInfo.id,
										"receiver": receiver,
										"mobile": mobile,
										"province": prov,
										"city": city,
										"district": district,
										"detail": detail
									}, {
										headers: {
											'headerUserId': userInfo.id,
											'headerUserToken': userInfo.userUniqueToken
										}
									})
								.then(res => {
									if (res.data.status == 200) {
										this.closeAddressDialog();
										this.renderUserAddressList();

										// 设置更新地址的id为空
										this.updatedAddressId = "";
									} else if (res.data.status == 500) {
										alert(res.data.msg);
									}
								});
						} else {
							axios.post(
									serverUrl + '/address/update', {
										"addressId": addressId,
										"userId": userInfo.id,
										"receiver": receiver,
										"mobile": mobile,
										"province": prov,
										"city": city,
										"district": district,
										"detail": detail
									}, {
										headers: {
											'headerUserId': userInfo.id,
											'headerUserToken': userInfo.userUniqueToken
										}
									})
								.then(res => {
									if (res.data.status == 200) {
										this.closeAddressDialog();
										this.renderUserAddressList();
									} else if (res.data.status == 500) {
										alert(res.data.msg);
									}
								});
						}

					},
					closeAddressDialog() {
						$(document.body).css("overflow", "visible");
						$('.theme-login').removeClass("selected");
						$('.item-props-can').removeClass("selected");
						$('.theme-popover-mask').hide();
						$('.theme-popover').slideUp(200);

						// 设置更新地址的id为空
						this.updatedAddressId = "";
						this.flushAddressForm();
					},
					renderUserAddressList() {
						var userInfo = this.userInfo;
						// 请求后端获得最新数据
						var serverUrl = app.serverUrl;
						axios.defaults.withCredentials = true;
						axios.post(
								serverUrl + '/address/list?userId=' + userInfo.id, {}, {
									headers: {
										'headerUserId': userInfo.id,
										'headerUserToken': userInfo.userUniqueToken
									}
								})
							.then(res => {
								if (res.data.status == 200) {
									var addressList = res.data.data;
									// console.log(addressList);
									this.addressList = addressList;

									// 设置默认应该选中的地址id
									this.setDefaultChoosedAddressId(addressList);

									// 清空地址内容
									this.flushAddressForm();
								} else if (res.data.status == 500) {
									alert(res.data.msg);
									console.log(res.data.msg);
								} else {
									alert(res.data.msg);
									console.log(res.data.msg);
								}
							});
					},
					flushAddressForm() {
						this.receiver = "";
						this.mobile = "";
						this.prov = "北京";
						this.city = "北京";
						this.district = "东城区";
						this.detail = "";
						this.updateCity();
						this.updateDistrict();
					},
					setDefaultChoosedAddressId(addressList) {
						var confirmAddress = {};
						for (var i = 0; i < addressList.length; i++) {
							var address = addressList[i];
							if (address.isDefault == 1) {
								this.defaultAddressId = address.id;
								confirmAddress = address;
								// 如果当前页面还没有选中的地址，则把默认地址作为选中地址
								var choosedAddressId = this.choosedAddressId;
								if (choosedAddressId == null || choosedAddressId == undefined || choosedAddressId == '') {
									this.choosedAddressId = address.id;
								}
								break;
							}
						}

						// 赋值
						this.confirmAddress = confirmAddress;
					},
					renderOrderInfoList() {
						var selectedItemSpecIds = app.getUrlParam("selectedItemSpecIds");
						if (selectedItemSpecIds == null || selectedItemSpecIds == '' || selectedItemSpecIds ==
							undefined) {
							app.goErrorPage();
						}

						var specIdsArray = new Array();
						specIdsArray = selectedItemSpecIds.split(",");

						var orderItemList = [];
						var totalAmount = 0;
						for (var i = 0; i < specIdsArray.length; i++) {
							var tmpSpecId = specIdsArray[i];
							var orderItem = this.getItemFromCookieShopcartList(tmpSpecId);
							orderItemList.push(orderItem);
							totalAmount += (orderItem.priceDiscount * orderItem.buyCounts);
						}
						// console.log(orderItemList);
						this.orderItemList = orderItemList;
						this.totalAmount = totalAmount;

						if (orderItemList.length <= 0) {
							alert("没有商品信息，或订单已经提交");
							window.location.href = "shopcart.html";
						}
					},
					getItemFromCookieShopcartList(specId) {
						var shopcartList = app.getShopcartList();

						if (shopcartList == null || shopcartList == undefined || shopcartList.length == 0) {
							app.goErrorPage();
						}

						for (var i = 0; i < shopcartList.length; i++) {
							var tmpSpecId = shopcartList[i].specId;
							if (tmpSpecId == specId) {
								return shopcartList[i];
							}
						}
					},
					// 打开商品详情页面
					showItemDetail(itemId) {
						window.open("item.html?itemId=" + itemId);
					},
					// 通过cookie判断用户是否登录
					judgeUserLoginStatus() {
						var userCookie = app.getCookie("user");
						if (userCookie != null && userCookie != undefined && userCookie != '') {
							var userInfoStr = decodeURIComponent(userCookie);
							// console.log(userInfo);
							if (userInfoStr != null && userInfoStr != undefined && userInfoStr != '') {
								var userInfo = JSON.parse(userInfoStr);
								// 判断是否是一个对象
								if (typeof(userInfo) == "object") {
									this.userIsLogin = true;
									// console.log(userInfo);
									this.userInfo = userInfo;
								} else {
									this.userIsLogin = false;
									this.userInfo = {};
								}
							}
						} else {
							this.userIsLogin = false;
							this.userInfo = {};
						}
					}
				}
			});
		</script>
	</body>

</html>
